import React, { memo } from 'react'
import type { FC, ReactNode } from 'react'
import { SongCardWrapper } from './style'
import { formatMinuteSecond } from '@/utils/format-utils'

interface IProps {
  children?: ReactNode
  index: number
  info: any
}

const SongCard: FC<IProps> = (props) => {
  const { index, info } = props
  const id = info.id
  const name = info.name
  const singer = info.ar
  const time = info.dt
  const album = info.al && info.al.name
  const albumId = info.al && info.al.id
  return (
    <SongCardWrapper>
      <div className="index">
        <div className="number">{index}</div>
        <div className="icon sprite_icon"></div>
      </div>
      <a
        className="link"
        rel="noopener noreferrer"
        href={`#/discover/song?id=${id}`}
      >
        <div className="song-title">{name}</div>
      </a>
      <div className="length">
        <div className="control">
          <div className="sprite_icon2 icon add"></div>
          <div className="sprite_icon2 icon collect"></div>
          <div className="sprite_icon2 icon share"></div>
          <div className="sprite_table icon down"></div>
        </div>
        <span className="time">{formatMinuteSecond(time)}</span>
      </div>
      <div className="name">
        {singer &&
          singer.map((item: any, index: number) => {
            return (
              <a
                rel="noopener noreferrer"
                href={`#/discover/artist/detail?id=${item.id}`}
                key={index}
              >
                {item.name}
              </a>
            )
          })}
      </div>
      <a
        rel="noopener noreferrer"
        href={`#/discover/album/detail??id=${albumId}`}
        className="album"
      >
        {album}
      </a>
    </SongCardWrapper>
  )
}

export default memo(SongCard)
